<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '需求单',
    enablePullDownRefresh: false,
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <th-page-box tabBarHeight="100rpx">
    <template #tabBar>
      <view class="tab_bar_inner">
        <wd-navbar title="会议室预约" :bordered="false" safeAreaInsetTop>
          <template #left>
            <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
          </template>
        </wd-navbar>
      </view>
    </template>
    <template #inner>
      <view style="display: flex; flex-direction: column; height: 100%; background-color: #f2f2f1">
        <view style="display: flex; flex: 1; flex-direction: column; height: 0">
          <view style="flex: 1; overflow: auto">
            <wd-form ref="formRef" :model="form" :rules="rules">
              <th-card title="申请信息">
                <!-- <th-form-item label="单据编号">
                  <view class="text seq-no-text">
                    {{ form.id }}
                  </view>
                </th-form-item> -->
                <th-form-item v-if="form.id" :label="'会议代号'">
                  <view class="text seq-no-text">
                    <wd-input
                      type="text"
                      prop="code"
                      v-model="form.code"
                      :placeholder="`${'会议代号'}`"
                      no-border
                      :disabled="true"
                    />
                  </view>
                </th-form-item>
                <th-form-item :label="'预约人'">
                  <view class="text seq-no-text">
                    <text
                      v-if="
                        form.flowTaskId ||
                        !(form.status == 0 || form.status == null || form.status == 3)
                      "
                    >
                      {{ form.applyUserName }}
                    </text>
                    <wd-input
                      v-else
                      type="text"
                      readonly
                      prop="applyUserId"
                      v-model="form.applyUserName"
                      :placeholder="`请选择${'预约人'}`"
                      no-border
                      @click="showSelectUser"
                    />
                  </view>
                </th-form-item>
                <th-form-item label="部门">
                  <text class="text seq-no-text">{{ form.deptName }}</text>
                </th-form-item>
                <!-- <th-form-item label="所属公司">
                  <text class="text seq-no-text">{{ form.tenantName }}</text>
                </th-form-item> -->
              </th-card>
              <th-card :titleBlock="false">
                <th-form-item label="开始时间">
                  <view class="seq-no-text">
                    <view style="flex: 1">
                      <!-- :formatter="formatter" -->
                      <!--  -->
                      <wd-datetime-picker
                        prop="startDate"
                        type="datetime"
                        :minDate="minDate"
                        :maxDate="maxDate"
                        v-model="startDate"
                        :default-value="defaultValue"
                        placeholder="请选择开始时间"
                        :disabled="
                          form.flowTaskId ||
                          !(form.status == 0 || form.status == null || form.status == 3)
                        "
                        :filter="filter"
                        :error="dateError"
                        @confirm="timeChange"
                      />
                    </view>
                  </view>
                </th-form-item>
                <th-form-item label="结束时间">
                  <view class="seq-no-text">
                    <view style="flex: 1">
                      <!-- :formatter="formatter" -->
                      <!-- display-format="YYYY-MM-DD HH:mm:ss" -->
                      <wd-datetime-picker
                        prop="endDate"
                        type="datetime"
                        :minDate="minDate"
                        :maxDate="maxDate"
                        v-model="endDate"
                        :default-value="defaultValue"
                        placeholder="请选择开始时间"
                        :disabled="
                          form.flowTaskId ||
                          !(form.status == 0 || form.status == null || form.status == 3)
                        "
                        :filter="filter"
                        :error="dateError"
                        @confirm="timeChange"
                      />
                    </view>
                  </view>
                </th-form-item>
                <th-form-item label="使用时长">
                  <view class="seq-no-text">
                    <view style="flex: 1">
                      <wd-input
                        prop="duration"
                        type="number"
                        readonly
                        v-model="form.duration"
                        placeholder="使用时长"
                        no-border
                        :disabled="
                          form.flowTaskId ||
                          !(form.status == 0 || form.status == null || form.status == 3)
                        "
                      />
                    </view>
                    <!-- <span style="color: #999">小时</span> -->
                    <span style="color: #999">分钟</span>
                  </view>
                </th-form-item>
              </th-card>
              <th-card :titleBlock="false">
                <th-form-item label="参会人数">
                  <view class="seq-no-text">
                    <view style="flex: 1">
                      <wd-input
                        prop="personNum"
                        type="number"
                        v-model="form.personNum"
                        placeholder="请输入参会人数"
                        no-border
                        :disabled="
                          form.flowTaskId ||
                          !(form.status == 0 || form.status == null || form.status == 3)
                        "
                        @blur="personNumBlur"
                      />
                    </view>
                    <span style="color: #999">人</span>
                  </view>
                </th-form-item>
                <th-form-item label="会议室">
                  <view class="seq-no-text">
                    <view style="flex: 1">
                      <wd-picker
                        prop="roomId"
                        v-model="form.roomId"
                        placeholder="请选择会议室"
                        :disabled="
                          form.flowTaskId ||
                          !(form.status == 0 || form.status == null || form.status == 3)
                        "
                        :columns="roomList"
                        value-key="id"
                        label-key="_name"
                        style="background-color: transparent"
                        class="diabledStyle"
                      />
                    </view>
                  </view>
                </th-form-item>
                <th-form-item label="提前提醒时间">
                  <view class="seq-no-text">
                    <view style="flex: 1">
                      <!-- <wd-picker
                        prop="remind"
                        v-model="form.remind"
                        :disabled="
                          form.flowTaskId || !(form.status == 0 || form.status == null || form.status == 3)
                        "
                        :columns="reminds"
                        value-key="value"
                        label-key="label"
                        style="background-color: transparent"
                        class="diabledStyle"
                      /> -->
                      <wd-input
                        type="number"
                        v-model="form.remind"
                        placeholder="请输入提前提醒时间"
                        no-border
                        :disabled="
                          form.flowTaskId ||
                          !(form.status == 0 || form.status == null || form.status == 3)
                        "
                        use-suffix-slot
                      >
                        <template #suffix>
                          <wd-picker
                            v-model="form.remindType"
                            :disabled="
                              form.flowTaskId ||
                              !(form.status == 0 || form.status == null || form.status == 3)
                            "
                            :columns="remindTypes"
                          ></wd-picker>
                        </template>
                      </wd-input>
                    </view>
                  </view>
                </th-form-item>
              </th-card>
            </wd-form>

            <th-card
              title="审核信息"
              v-if="form.status == '1' || form.status == '2' || form.status == '3'"
            >
              <view class="row-list">
                <view class="row" v-if="form.id && form.flowTaskId">
                  <!-- <view class="label">审核意见</view> -->
                  <view class="value">
                    <view class="mb2 mt2">
                      <h5>审核意见</h5>
                    </view>
                    <wd-textarea
                      type="textarea"
                      v-model="comment"
                      rows="6"
                      placeholder="请输入审核意见"
                      style="border: 1px solid #f7f7f7"
                    ></wd-textarea>
                  </view>
                </view>
                <view>
                  <view style="padding-top: 10px">
                    <flowTable
                      ref="flowDetailsTableRef"
                      :processInstanceId="form.instanceId"
                    ></flowTable>
                  </view>
                </view>
              </view>
            </th-card>
          </view>

          <view class="flow-btn-fixed" v-if="form.id && form.flowTaskId">
            <view class="btn_group" style="width: 100%">
              <view class="btn danger" @click="oncomplete(1)">
                <image src="@/static/reject.png" class="btn-icon"></image>
                拒绝
              </view>
              <view class="btn primary" @click="oncomplete(0)">
                <image src="@/static/tongyi.png" class="btn-icon"></image>
                同意
              </view>
            </view>
          </view>
          <view class="flow-btn-fixed" v-else>
            <view class="btn_group" style="width: 100%">
              <!-- <view class="btn danger" @click="onCancel()">取消</view> -->
              <!-- @click="onSave()" -->
              <view
                class="btn primary"
                @click="onSaveHandle()"
                v-if="
                  !!(form.status == 0 || form.status == null || form.status == 3) &&
                  checkPremiss('work_conference_room_make_an_appointment_add')
                "
              >
                <image src="@/static/save.png" class="btn-icon"></image>
                保存
              </view>
              <view
                class="btn primary"
                @click="onSubmit()"
                v-if="
                  !!(form.status == null || form.status == 0 || form.status == 3) &&
                  checkPremiss('work_conference_room_make_an_appointment_add')
                "
              >
                <image src="@/static/submit.png" class="btn-icon"></image>
                提交
              </view>
              <view
                class="btn primary"
                @click="onRevokeShow()"
                v-if="
                  !!(form.id && form.status == 1) &&
                  checkPremiss('work_conference_room_make_an_appointment_revoke')
                "
              >
                <image src="@/static/rovoke.png" class="btn-icon"></image>
                撤回
              </view>
              <view
                class="btn primary"
                @click="onDel()"
                v-if="
                  !!(form.id && (form.status == 0 || form.status == null || form.status == 3)) &&
                  checkPremiss('work_conference_room_make_an_appointment_del')
                "
              >
                <image src="@/static/del.png" class="btn-icon"></image>
                删除
              </view>
              <view
                class="btn primary"
                @click="onCancelApprover()"
                v-if="
                  form.status == '2' &&
                  checkPremiss('work_conference_room_make_an_appointment_abandon')
                "
              >
                <image src="@/static/rovoke1.png" class="btn-icon"></image>
                弃审
              </view>
            </view>
          </view>
          <view style="width: 100; height: 10rpx; background-color: transparent"></view>
        </view>

        <leaguerPicker
          :show="selectUserShow"
          :filtration="true"
          :checked="selectList"
          :nop="1"
          :returnDeptName="true"
          @hideModal="hideModal"
          @checkLeaguer="checkLeaguer"
        ></leaguerPicker>
      </view>

      <wd-popup v-model="revokeShow" position="bottom" @close="handleClose">
        <view style="display: flex; flex-direction: column; height: 100%">
          <wd-textarea
            v-model="revokeComment"
            placeholder="请填写撤回原因"
            no-border
            prop="revokeComment"
            class="reovke-textarea"
          />
          <view class="flow-btn-fixed">
            <view class="btn_group" style="width: 100%">
              <view class="btn danger" @click="handleClose">取消</view>
              <view class="btn primary" @click="onRevoke">撤回</view>
            </view>
          </view>
        </view>
      </wd-popup>
    </template>
  </th-page-box>
</template>

<script lang="ts" setup>
import { useSetting } from '@/stores/setting';
import {
  getMeetingRoom,
  getObj,
  addObj,
  putObj,
  delObj,
  getSubmitProcess,
  postRevoke,
  complete,
  postAbandon,
  getPersonByPersonCode,
} from '@/service/work/conferenceRoom/makeAnAppointment';
import { formatByDayjs, downloadFileToLocal } from '@/utils/util';
import { useUserStore } from '@/stores/user';
import { useDict } from '@/hooks/dict';
import flowDetailsTable from '@/task/components/flowDetailsTable.vue';
import cache from '@/utils/cache';
import pickerInvList from '@/components/pickerInvList.vue';
import showModal from '@/utils/modal';
import dayjs from 'dayjs';
import { nextTick } from 'process';

const setting = useSetting();
const emits = defineEmits(['refresh']);
// const tenantId = cache.getTenant();
// const tenantName = cache.get('tenantName');
const userStore = useUserStore();
const _userInfo = userStore.userInfos.user;
const flowDetailsTableRef: any = ref({});
const selectUserShow = ref(false);
const selectList = ref([]);
const reminds = ref(useDict('meeting_remind_date').meeting_remind_date);
const roomList = ref([]);
const minDate = ref(new Date(dayjs().format('YYYY-MM-DD 00:00:00')).getTime());
const maxDate = ref(new Date(dayjs().add(1, 'year').format('YYYY-MM-DD')).getTime());
const defaultValue = ref<number>(Date.now());
// const defaultValue = ref<number>(new Date(`${dayjs().format('YYYY-MM-DD')} 12:00:00`).getTime());
const dateError = ref(false);
const startDate = ref();
const endDate = ref();
const remindTypes = ref([
  {
    label: '分钟',
    value: 'm',
  },
  {
    label: '小时',
    value: 'h',
  },
  {
    label: '天',
    value: 'd',
  },
]);
console.log('reminds', reminds);

// 提交表单数据
const form = reactive({
  id: '',
  code: '',
  topic: '',
  status: null,

  interval: [], // 时间区间

  instanceId: '',

  deptId: '',
  deptName: '',
  applyUserId: '',
  applyUserCode: '',
  applyUserName: '',
  applyDate: '',
  startDate: null,
  endDate: null,
  duration: null,
  personNum: null,
  roomId: '',
  remind: '', // 提醒
  remindType: 'm',
  flowTaskId: null,
});

// 获取列表
const getMeetingRoomList = () => {
  getMeetingRoom().then((res) => {
    if (res.code === 0) {
      const list = [];
      res.data?.forEach((item) => {
        list.push({
          _name: `${item.name}（${item.personNum}人）`,
          ...item,
        });
      });
      roomList.value = list;
    }
  });
};

const personNumBlur = () => {
  console.log('form.personNum', form.personNum);
  roomList.value.sort((a, b) => {
    const diffA = Math.abs(form.personNum - a.personNum);
    const diffB = Math.abs(form.personNum - b.personNum);
    return diffA - diffB; // 排序
  });
};

const init = (id) => {
  uni.showLoading({
    mask: true,
  });
  getObj(id)
    .then((res) => {
      console.log('res', res);
      if (res.code === 0) {
        const format = 'YYYY-MM-DD HH:mm:ss';
        Object.assign(form, {
          ...res.data,
          remind:
            res.data.remindLists && res.data.remindLists.length
              ? `${res.data.remindLists[0]?.minute}`
              : '',
          remindType:
            res.data.remindLists && res.data.remindLists.length
              ? `${res.data.remindLists[0]?.remindType}`
              : '',
        });
        nextTick(() => {
          startDate.value = new Date(dayjs(res.data.startDate).format(format)).getTime();
          endDate.value = new Date(dayjs(res.data.endDate).format(format)).getTime();
          console.log('startDate.value', startDate.value);
          console.log('endDate.value', endDate.value);
        });
        // getCancelApprover();
      } else {
        uni.showToast({
          mask: true,
          icon: 'none',
          title: `获取数据失败，失败原因${res.msg}`,
        });
      }
    })
    .finally(() => {
      uni.hideLoading();
    });
};

const getPerson = async (personCode) => {
  getPersonByPersonCode({ personCode }).then((res) => {
    console.log('getPerson', res.data);
    if (res.code == 0 && res.data && res.data.id) {
      form.applyUserId = res.data.id;
      form.deptId = res.data.deptId;
      form.deptName = res.data.deptName;
      // form.tenantId = res.data.tenantId;
    } else {
      form.deptId = '';
      form.deptName = '';
      // form.tenantId = '';
      form.applyUserId = '';
      form.applyUserCode = '';
      form.applyUserName = '';
    }
  });
};

onLoad(async (options) => {
  const { id, roomId } = options;
  getMeetingRoomList();
  if (id) {
    init(id);
  } else {
    form.roomId = roomId || '';
    console.log('userInfo');
    // form.deptId = _userInfo.deptId;
    // form.applyUserId = _userInfo.userId;
    form.applyUserCode = _userInfo.username;
    // form.applyUserName = _userInfo.realname;
    form.applyUserName = _userInfo.nickname;
    console.log('userStore.userInfos.user', _userInfo);
    getPerson(_userInfo.username);
  }
});

const goBack = () => {
  uni.navigateBack();
};

const getDict = async () => {
  console.log('getDict', 1);
};

const hideModal = () => {
  selectUserShow.value = false;
};

const checkLeaguer = (e) => {
  console.log('checkLeaguer', e);
  form.applyUserId = e[0].id;
  // form.tenantId = e[0].tenantId;
  form.applyUserCode = e[0].personCode;
  form.applyUserName = e[0].personName;
  form.deptName = e[0].deptName;
  form.deptId = e[0].deptId;
};

const showSelectUser = () => {
  selectUserShow.value = true;
};

// const formatter = (type, value) => {
//   switch (type) {
//     case 'year':
//       return `${value.toString().slice(-2)}年`;
//     case 'month':
//       return `${value}月`;
//     case 'date':
//       return `${value}日`;
//     case 'hour':
//       return `${value}时`;
//     case 'minute':
//       return `${value}分`;
//     default:
//       return value;
//   }
// };

const filter = (type, values) => {
  // if (type === 'hour') {
  //   return values.filter((value) => value > 7 && value < 24);
  // }
  // if (type === 'minute') {
  //   return values.filter((value) => value % 30 === 0);
  // }
  if (type === 'minute') {
    return values.filter((value) => value % 5 === 0);
  }
  return values;
};

const timeChange = () => {
  console.log('timeChange', startDate.value, endDate.value);
  if (endDate.value && new Date(startDate.value).getTime() > new Date(endDate.value).getTime()) {
    uni.showToast({
      title: '开始时间不能大于结束时间',
      icon: 'none',
      mask: true,
    });
    dateError.value = true;
    return;
  }
  dateError.value = false;

  if (endDate.value || startDate.value) {
    form.startDate = startDate.value ? formatByDayjs(startDate.value, 'YYYY-MM-DD HH:mm:00') : '';
    form.endDate = endDate.value ? formatByDayjs(endDate.value, 'YYYY-MM-DD HH:mm:00') : '';
  }
  form.duration = calculateDurationInHours(form.startDate, form.endDate, 0) || null;
  console.log('timeChange', form.startDate, form.endDate);
};

const calculateDurationInHours = (startTimeStr, endTimeStr, fixed) => {
  // 将时间字符串转换为Date对象
  const startTime = new Date(startTimeStr);
  const endTime = new Date(endTimeStr);

  // 验证时间是否有效
  // eslint-disable-next-line no-restricted-globals
  if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
    return 'Invalid date';
  }

  // 计算时间差（毫秒）
  const diffInMilliseconds =
    Math.round(endTime.getTime() * 10000 - startTime.getTime() * 10000) / 10000;

  // 将毫秒转换为小时
  // const diffInHours = diffInMilliseconds / (1000 * 60 * 60);
  // 将毫秒转换为分钟
  const diffInM = diffInMilliseconds / (1000 * 60);

  // 可以选择四舍五入到小数点后几位，比如保留两位小数
  // return diffInHours.toFixed(2);
  return diffInM.toFixed(fixed);
};

const rules: any = computed(() => {
  return {
    // topic: [
    //   {
    //     required: true,
    //     message: '主题不能为空',
    //   },
    // ],
    applyUserId: [
      {
        required: true,
        message: `${'预约人'}不能为空`,
      },
    ],

    startDate: [{ required: true, message: '开始时间不能为空' }],
    endDate: [{ required: true, message: '结束时间不能为空' }],
    duration: [{ required: true, message: '使用时长不能为空' }],
    roomId: [{ required: true, message: '会议室不能为空' }],
  };
});

const onCancel = () => {
  uni.navigateBack({});
};
const formRef: any = ref({});
// 刷新流转详情
const refreshFlow = () => {
  if (form.instanceId) {
    nextTick(() => {
      flowDetailsTableRef.value.getFlowDetails();
    });
  }
};
const onSaveHandle = (isSubmit = false) => {
  formRef.value.validate().then(({ valid, errors }) => {
    if (!valid) return false;

    const params = {
      ...form,
      duration: form.duration ? Number(form.duration) : 0,
      remindLists: [
        {
          minute: form.remind,
          remindType: form.remindType,
          userCode: form.applyUserCode,
        },
      ],
    };
    if (!form.remind && form.remind != 0) {
      params.remindLists = [];
    }

    uni.showLoading({
      mask: true,
    });

    (form.id ? putObj(params) : addObj(params))
      .then((res) => {
        // uni.navigateBack();
        if (res.code == 0) {
          console.log('isSubmit', isSubmit, form.id, res.data);
          console.log('isSubmit', isSubmit && (form.id || res.data));
          if (isSubmit && (form.id || res.data)) {
            submitHandle(form.id ? form.id : res.data);
          } else {
            uni.hideLoading();
            uni.showToast({
              mask: true,
              title: `单据${form.id}保存成功`,
              icon: 'none',
            });
            setTimeout(() => {
              init(form.id || res.data);
            }, 500);
          }
        } else {
          uni.hideLoading();
          uni.showToast({
            mask: true,
            title: `单据${form.id}保存失败，失败原因${res.msg}`,
            icon: 'none',
          });
        }
      })
      .catch((err) => {
        uni.hideLoading();
      })
      .finally(() => {
        // uni.hideLoading();
      });
  });
};

const onSubmit = () => {
  showModal({
    title: '提示',
    content: '是否提交该单据',
    showCancel: true,
    confirm: () => {
      onSaveHandle(true);
    },
  });
};

const submitHandle = (id) => {
  uni.showLoading({
    mask: true,
  });
  getSubmitProcess({ id })
    .then((res) => {
      if (res.code == 0) {
        uni.showToast({
          mask: true,
          title: `单据${id}提交成功`,
          icon: 'none',
        });
        setTimeout(() => {
          init(id);
        }, 500);
      } else {
        uni.showToast({
          mask: true,
          title: `单据${id}提交失败，失败原因：${res.msg}`,
          icon: 'none',
        });
      }
    })
    .finally(() => {
      uni.hideLoading();
    });
};

const onDel = () => {
  showModal({
    title: '提示',
    content: '是否删除该单据',
    showCancel: true,
    confirm: () => {
      uni.showLoading({
        mask: true,
      });
      delObj([form.id])
        .then((res) => {
          if (res.code == 0) {
            uni.showToast({
              mask: true,
              title: `单据${form.id}删除成功`,
              icon: 'none',
            });
            // const pages = getCurrentPages();
            // const prevPage = pages[pages.length - 2]; // 上一个页面
            // prevPage.$vm.refresh();
            goBack();
            uni.$emit('refresh');
          } else {
            uni.showToast({
              mask: true,
              title: `单据${form.id}删除失败，失败原因：${res.msg}`,
              icon: 'none',
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
  });
};

// 撤回
const revokeComment = ref('');
const revokeShow = ref(false);
const handleClose = () => {
  revokeShow.value = false;
};
const onRevoke = () => {
  showModal({
    title: '提示',
    content: '是否撤回该单据',
    showCancel: true,
    confirm: () => {
      uni.showLoading({
        mask: true,
      });
      postRevoke({
        id: form.id,
        instanceId: form.instanceId,
        comment: revokeComment.value,
      })
        .then((res) => {
          if (res.code == 0) {
            uni.showToast({
              mask: true,
              title: `单据${form.id}撤回成功`,
              icon: 'none',
            });
            handleClose();
            setTimeout(() => {
              init(form.id);
              uni.$emit('refresh');
              refreshFlow();
            }, 500);
          } else {
            uni.showToast({
              mask: true,
              title: `单据${form.id}撤回失败，失败原因：${res.msg}`,
              icon: 'none',
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
  });
};
const onRevokeShow = () => {
  revokeComment.value = '';
  revokeShow.value = true;
};

// 审核信息
const comment = ref('');
const oncomplete = (type) => {
  if (type == '1' && !comment.value) {
    uni.showToast({
      title: '请填写审核意见',
      icon: 'none',
      mask: true,
    });
    return;
  }

  const params = {
    // ...form,
    flowTaskId: form.flowTaskId,
    comment: comment.value,
    id: form.id,
    approve: type == 0,
  };
  uni.showLoading({
    mask: true,
  });
  complete(params)
    .then((res) => {
      if (res.code == 0) {
        uni.showToast({
          title: '单据审核成功',
          icon: 'none',
          mask: true,
        });
        // uni.navigateBack({});
        setTimeout(() => {
          init(form.id);
          uni.$emit('refresh');
          refreshFlow();
        }, 500);
      } else {
        uni.showToast({
          mask: true,
          title: `单据审核失败，失败原因：${res.msg}`,
          icon: 'none',
        });
      }
    })
    .finally(() => {
      uni.hideLoading();
    });
};

const preview = (url) => {
  if (!url) return;
  uni.previewImage({
    urls: [url],
  });
};

// const isCanCancelApprover = ref(false); // 是否能弃审
// const getCancelApprover = () => {
//   listLastNodePerson({
//     processInstanceId: form.instanceId,
//   })
//     .then((res) => {
//       const dataList = res.data;
//       const { username } = userStore.userInfos.user;
//       if (dataList.find((item) => item == username)) {
//         isCanCancelApprover.value = true;
//       } else {
//         isCanCancelApprover.value = false;
//       }
//     })
//     .finally(() => {});
// };

const onCancelApprover = () => {
  showModal({
    title: '提示',
    content: '是否弃审该单据',
    showCancel: true,
    confirm: () => {
      uni.showLoading({
        mask: true,
      });
      postAbandon(form)
        .then((res) => {
          if (res.code == 0) {
            uni.showToast({
              mask: true,
              title: `单据${form.id}弃审成功`,
              icon: 'none',
            });
            setTimeout(() => {
              init(form.id);
              uni.$emit('refresh');
              refreshFlow();
            }, 500);
          } else {
            uni.showToast({
              mask: true,
              title: `单据${form.id}弃审失败，失败原因：${res.msg}`,
              icon: 'none',
            });
          }
        })
        .finally(() => {
          uni.hideLoading();
        });
    },
  });
};

const checkPremiss = (k) => {
  return userStore.userInfos.authBtnList.some((v: string) => v === k);
};

const statusList = [
  {
    text: '未提交',
    value: '0',
    color: '#108ee9',
  },
  {
    text: '审批中',
    value: '1',
    color: '#d46b08',
  },
  {
    text: '已审核',
    value: '2',
    color: '#87d068',
  },
  {
    text: '驳回',
    value: '3',
    color: '#f50',
  },
  {
    text: '撤回',
    value: '9',
    color: '#f50',
  },
];
const getStatus = (status) => {
  if (status == null)
    return {
      text: '未提交',
      value: '0',
      color: '#108ee9',
    };
  const o1 = statusList.find((item) => item.value == status);
  return o1 ? { ...o1 } : { text: status };
};
</script>

<style lang="scss" scoped>
.card-detail {
  padding: 0 !important;
}

.wd-cell {
  padding-left: 0 !important;
}

.wd-card__title {
  border-left: 4px solid #2e5cf6 !important;
}

.sign-main {
  // display: flex;
  // align-items: center;
  // justify-content: center;
  // width: 100%;
  // margin: 20rpx 0;
  position: fixed;
  right: 0rpx;
  bottom: 40rpx;
  width: 160rpx;
  height: 80rpx;
  line-height: 80rpx;
  color: white;
  text-align: center;
  background-color: rgb(77 128 240);

  // border-radius: 50%;
  border-top-left-radius: 40rpx;
  border-bottom-left-radius: 40rpx;
}

:deep(.label) {
  width: 160rpx !important;
}

.result-tag {
  padding: 6rpx 14rpx;
  font-size: 24rpx;
  color: white;
  background-color: #87d068;
  border-radius: 4rpx;
}

:deep(.wd-picker__cell) {
  padding: 0 !important;

  // padding: 0 20rpx !important;
  // font-size: 26rpx !important;
}

:deep(.wd-select-picker__cell) {
  padding: 0 !important;
}

// .wd-picker__value-wraper {
//   .wd-icon {
//     display: none !important;
//   }
// }

.seq-no-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.flow-btn-fixed {
  width: 100%;
  background-color: white;
  border-top: 1px solid #f2f2f1;
}

.btn_group {
  display: flex;
  justify-content: space-between;

  // margin: 0rpx 0 20rpx;
  // border-bottom: 1px solid #f2f2f1;

  .btn {
    display: flex;

    // width: 49%;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    // height: 40px;
    min-height: 40px;
    padding: 10rpx 0;
    font-size: 24rpx;
    color: black;

    // background-color: white !important;
    background-color: #dbecff !important;
    border-left: 1px solid #f7f7f7;
    border-radius: 0 !important;

    // color: white;
    border-radius: 6rpx;

    .btn-icon {
      width: 40rpx;
      height: 40rpx;
      margin-bottom: 8rpx;
    }
  }

  .danger {
    background-color: #f56c6c;
  }

  .primary {
    background-color: #409eff;
  }
}

.form-demandDesc {
  align-items: flex-start !important;
}
</style>
<style lang="scss">
/* .sample-unit-class {
      color: #9d9999 !important;

      .wd-icon {
        display: none !important;
      }

      .wd-picker__placeholder {
        margin-right: 0 !important;
        font-size: 20rpx !important;
        color: #9d9999 !important;
      }

      .wd-picker__value {
        margin-right: 0 !important;
        font-size: 20rpx !important;
        color: #9d9999 !important;
      }

      .wd-picker__arrow {
        display: none !important;
      }
    } */

.wd-picker,
.wd-select-picker {
  width: 100%;
}

.wd-textarea::after {
  height: 0;
}

:deep(.wd-picker__placeholder) {
  font-size: 28rpx !important;
  color: #bfbfbf !important;
}

:deep(.wd-input__placeholder) {
  font-size: 28rpx !important;
  color: #bfbfbf !important;
}

:deep(.wd-textarea__placeholder) {
  font-size: 28rpx !important;
  color: #bfbfbf !important;
}

.sample-unit-custom-value-class .wd-picker__placeholder {
  font-size: 20rpx !important;
  color: #bfbfbf !important;
}

.sample-unit-class {
  .wd-picker__placeholder {
    margin-right: 0 !important;
    font-size: 24rpx !important;
  }

  .wd-icon {
    display: none !important;
  }
}

:deep(.wd-picker__value) {
  color: #262626 !important;
}

:deep(.uni-input-input) {
  color: #262626 !important;
}

:deep(.wd-select-picker__value) {
  color: #262626 !important;
}

:deep(.uni-textarea-compute) {
  div {
    color: #262626 !important;
  }

  color: #262626 !important;
}

:deep(.uni-textarea-textarea) {
  color: #262626 !important;
}

:deep(.wd-textarea.is-auto-height::after) {
  display: none;
}

.reovke-textarea {
  box-sizing: border-box;
  flex: 1 !important;
  padding: 20rpx !important;

  :deep(.wd-textarea__value) {
    height: 100% !important;
  }
}

:deep(.wd-textarea.is-not-empty:not(.is-disabled)::after) {
  background-color: transparent !important;
}

.text {
  word-break: break-all;
  word-wrap: break-word;
}

.title_box .title_text {
  padding-left: 0 !important;
  margin-top: 10rpx !important;
}

.form-file {
  flex-direction: column;

  .label {
    width: 3rem !important;
  }

  .form-file-view {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;

    uni-button {
      margin: 5rpx 0 !important;
    }
  }

  // .content {
  //   flex: 1;
  //   width: 0;
  //   word-break: break-all;
  // }
}

.info-row-item {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 6rpx 0;
  color: blue;
  word-break: break-all;
}

:deep(.wd-col-picker__cell) {
  padding: 0 !important;
}

.line-red td {
  background-color: #ffecec !important;
}

.table-container table td {
  padding: 0 10rpx !important;

  .wd-textarea__value {
    padding-right: 0 !important;
    background: transparent !important;
  }
}

.assay-report-content {
  .block {
    .content {
      padding: 0 !important;
    }
  }
}
</style>
